<template>
	<view class="container">
		<view class="tui-searchbox">
			<view class="tui-search-input">
				<icon type="search" :size='13' color='#333'></icon>
				<!-- <input confirm-type="search" placeholder="" :focus="true" auto-focus
					placeholder-class="tui-input-plholder" class="tui-input" v-model.trim="key" @input="inputKey" /> -->
					
					<input type="text" placeholder="输入搜索的关键词" confirm-type="search" @click.stop="inputKey" style="font-size: 28rpx;" />
				<!-- <icon type="clear" :size='13' color='#bcbcbc' @tap="cleanKey" v-show="key"></icon> -->
			</view>
			<!-- <view class="tui-cancle" @tap="back">取消</view> -->
	<!-- 		<image src="https://storage11.360buyimg.com/ifloors/00035906/static/media/shopIconBlack.92a410e5.svg"
				mode="widthFix" style="width: 50rpx;"></image> -->
		</view>
		<view class="tabImage" v-if="list">
			<tn-tabs :list="list" :current="current"  :activeItemStyle="activeItemStyle"
				:inactiveItemStyle="inactiveItemStyle" :barStyle="barStyle" name="name" @change="change"></tn-tabs>
		</view>
		<view class="swiperImage">
			<tn-swiper :list="listSwiper"></tn-swiper>
		</view>
		<!--list-->
		<view class="tui-product-list" :style="{ marginTop: px(dropScreenH + 18) }">
			<view class="tui-product-container">
				<block v-for="(item, index) in productList" :key="index" v-if="(index + 1) % 2 != 0">
					<!--商品列表-->
					<view class="tui-pro-item" hover-class="tui-hover" :hover-start-time="150" @tap="detail(item)">
						<image
							:src="info.app.cdnurl+item.image"
							class="tui-pro-img" mode="widthFix" />
						<view class="tui-pro-content">
							<view class="tui-pro-tit">{{ item.title }}</view>
							<view style="display: flex;justify-content: space-between;align-items: center;">
								<view class="">
									<view class="tui-pro-price">
										<text class="tui-sale-price" v-if="item.price">￥{{ item.price[0] }}</text>
										<text class="tui-factory-price">￥{{ item.original_price }}</text>
									</view>
									 <!-- <view class="tui-pro-pay">{{ item.payNum }}人付款</view> -->
								</view>
								<image
									src="https://storage11.360buyimg.com/ifloors/00035937/static/media/shopCarIcon.e3e107a0.svg"
									mode="widthFix" style="width: 50rpx;margin-top: 25rpx;"></image>
							</view>
						</view>
					</view>
					<!--商品列表-->
				</block>
			</view>
			<view class="tui-product-container">
				<block v-for="(item, index) in productList" :key="index" v-if="(index + 1) % 2 == 0">
					<!--商品列表-->
					<view class="tui-pro-item" hover-class="tui-hover" :hover-start-time="150" @tap="detail(item)">
						<image
							:src="info.app.cdnurl+item.image"
							class="tui-pro-img" mode="widthFix" />
						<view class="tui-pro-content">
							<view class="tui-pro-tit">{{ item.title }}</view>
							<view style="display: flex;justify-content: space-between;align-items: center;">
								<view class="">
									<view class="tui-pro-price">
										<text class="tui-sale-price" v-if="item.price">￥{{ item.price[0] }}</text>
										<text class="tui-factory-price">￥{{ item.original_price }}</text>
									</view>
									 <!-- <view class="tui-pro-pay">{{ item.payNum }}人付款</view> -->
								</view>
								<image
									src="https://storage11.360buyimg.com/ifloors/00035937/static/media/shopCarIcon.e3e107a0.svg"
									mode="widthFix" style="width: 50rpx;margin-top: 25rpx;"></image>
							</view>
						</view>
					</view>
					<!--商品列表-->
				</block>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		getShopGoodsList,
		getShopGoodsGoods 
	} from '../../apis/index.js'
	export default {
		data() {
			return {
				dropScreenH: 0, //下拉筛选框距顶部距离
				productList: [],
				activeItemStyle: {
					color: '#fff',
					fontSize: '34rpx',
				},
				inactiveItemStyle: {
					color: '#fff',
					fontSize: '30rpx',
				},
				barStyle: {
					backgroundColor: '#ffff00'
				},
				key: "",
				list: [{
					name: '首页'
				}],
				current: 0,
				listSwiper: [{
						image: 'https://m.360buyimg.com/babel/jfs/t1/197698/34/44734/100634/667a73c9F44c8fdfc/0cbe2048e2efc4ae.png',
					},
					{
						image: 'https://m.360buyimg.com/babel/jfs/t1/197698/34/44734/100634/667a73c9F44c8fdfc/0cbe2048e2efc4ae.png',
					},
				],
				listSize: 10,
				page: 1,
				last_page:'',
				obj:{
					sort: 'weigh',
					order: 'desc',
					category_id: '',
					list_rows: 10,
					page: 1
				},
				id:''
			}
		},
		async onReachBottom() {
			if (this.current==0) {
				if (this.last_page>this.page) {
					this.page++
					let res = await getShopGoodsList(this.id, this.listSize, this.page)
					this.last_page=res.data.last_page
					this.productList=[...this.productList,...res.data.data]
				}
			}else{
				if (this.last_page>this.obj.page) {
					this.obj.page++
					let res=await getShopGoodsGoods(this.obj)
					this.last_page=res.data.last_page
					this.productList=[...this.productList,...res.data.data]
				}
				
			}
			
			
		},
		async onLoad(option) {
			uni.setNavigationBarTitle({
				title: option.title
			})
			
			
			if (this.currentDatas) {
				this.list=[...this.list,...this.currentDatas]
			}
			this.id=option.id
			this.list[0].id=option.id
			let res = await getShopGoodsList(option.id, this.listSize, this.page)
			this.productList=[...this.productList,...res.data.data]
			this.last_page=res.data.last_page
		},
		methods: {
			inputKey(){
				uni.navigateTo({
					url: '/templatePage/search/search'
				})
			},
			px(num) {
				return uni.upx2px(num) + 'px';
			},
			detail: function(item) {
			
				// return
				uni.navigateTo({
					url: `/templatePage/productDetail/productDetail?index=${item.id}`
				});
			},
			async change(index) {
				this.current=index
				this.productList=[]
				this.page=1
				this.obj.page=1
				if (index==0) {
					let res = await getShopGoodsList(this.id, this.listSize, this.page)
					this.last_page=res.data.last_page
					this.productList=[...this.productList,...res.data.data]
				}else{
					this.obj.category_id=this.list[index].id
					this.productList=[]
					let res=await getShopGoodsGoods(this.obj)
					this.last_page=res.data.last_page
					this.obj.page=1
					this.productList=[...this.productList,...res.data.data]
				}
			}
		}
	}
</script>

<style>
	page {
		color: #333;
		background: #fff;
	}

	.container {
		/* padding: 0 30rpx 30rpx 30rpx; */
		box-sizing: border-box;
	}

	.tui-searchbox {
		padding: 30rpx 0;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		background-image: url('https://m.360buyimg.com/babel/jfs/t1/234220/4/16134/4442/66595d59F6b4dd8ee/a906ba729c96f100.jpg');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 100%;
		height: 100%;
		;
		padding: 20rpx 20rpx;

	}

	.tui-search-input {
		width: 100%;
		height: 66rpx;
		border-radius: 35rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		background: #f2f2f2;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
	}

	.tui-input {
		flex: 1;
		color: #333;
		padding: 0 16rpx;
		font-size: 28rpx;
	}

	.tui-input-plholder {
		font-size: 28rpx;
		color: #b2b2b2;
	}

	.tui-cancle {
		color: #888;
		font-size: 28rpx;
		padding-left: 30rpx;
		flex-shrink: 0;
	}

	.tui-history-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
	}

	.tui-history-content {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.tui-icon-delete {
		padding: 10rpx;
	}

	.tui-search-title {
		font-size: 28rpx;
		font-weight: bold;
	}

	.tui-hot-header {
		padding: 30rpx 0;
	}

	.tui-header {
		padding: 26rpx 0;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-header-left {
		font-size: 30rpx;
		color: #222;
		border-left: 4rpx solid #EB0909;
		padding-left: 10rpx;
		word-break: break-all;
	}

	.tui-noboredr {
		border-left: 0 !important;
	}

	.tui-result-box {
		font-size: 28rpx;
	}

	.tui-result-item {
		line-height: 28rpx;
		padding: 28rpx 0;
	}

	.tabImage {
		padding: 0 20rpx;
		background-image: url('https://m.360buyimg.com/babel/jfs/t1/234683/32/18615/3498/66595d7cF5f688739/5cf6e213ea6ee110.jpg!q70.dpg');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 100%;
		height: 100%;
	}

	.swiperImage {
		padding: 20rpx 20rpx 0 20rpx;
		background-image: url('https://m.360buyimg.com/babel/jfs/t1/238581/20/9395/46613/66595d84Fcd0802ed/22d5fadb02f25809.jpg');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 100%;
		height: 100%;

	}


	/* 商品列表*/

	.tui-product-list {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
		background: rgb(244, 244, 247);
		padding: 0 15rpx;
	}

	.tui-product-container {
		flex: 1;
		margin-right: 10rpx;
	}

	.tui-product-container:last-child {
		margin-right: 0;
	}

	.tui-pro-item {
		width: 100%;
		margin-bottom: 10rpx;
		background: #fff;
		box-sizing: border-box;
		border-radius: 12rpx;
		overflow: hidden;
		transition: all 0.15s ease-in-out;
	}

	.tui-flex-list {
		display: flex;
		margin-bottom: 1rpx !important;
	}

	.tui-pro-img {
		width: 100%;
		display: block;
	}

	.tui-proimg-list {
		width: 260rpx;
		height: 260rpx !important;
		flex-shrink: 0;
		border-radius: 12rpx;
	}

	.tui-pro-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.tui-pro-tit {
		color: #2e2e2e;
		font-size: 26rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-pro-price {
		padding-top: 18rpx;
	}

	.tui-sale-price {
		font-size: 34rpx;
		font-weight: 500;
		color: #e41f19;
	}

	.tui-factory-price {
		font-size: 24rpx;
		color: #a0a0a0;
		text-decoration: line-through;
		padding-left: 12rpx;
	}

	.tui-pro-pay {
		padding-top: 10rpx;
		font-size: 24rpx;
		color: #656565;
	}

	/* 商品列表*/
</style>